﻿<template>
    <div>
        <div class="crumbs">
            <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 文件列表
                </el-breadcrumb-item>
            </el-breadcrumb> -->
        </div>

        <div class="container">
            <div class="handle-box">
                <div>
                    <el-input v-model="query.orgName" placeholder="文件文件名" class="handle-input mr10"></el-input>
                    <el-input v-model="query.fileType" placeholder="文件类型" class="handle-input mr10"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                </div>
                <div style="margin: 10px 0 -10px 0;">
                    <el-button
                            type="primary"
                            size="mini"
                            class="handle-del mr10"
                            @click="addAllSelection"
                    >批量上传文件</el-button>
                </div>
            </div>
            <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >

                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form   label-width="110px" class="demo-table-expand">
                            <el-form-item label="ID">
                                <span>{{ props.row.id}}</span>
                            </el-form-item>
                            <el-form-item label="原文件名">
                                <span>{{ props.row.orgName }}</span>
                            </el-form-item>
                            <el-form-item label="生产文件名">
                                <span>{{ props.row.serverLocalName }}</span>
                            </el-form-item>
                            <el-form-item label="服务器储存路径">
                                <span>{{ props.row.serverLocalPath }}</span>
                            </el-form-item>
                            <el-form-item label="访问路径">
                                <el-link :href="props.row.networkPathURL" target="_blank">{{ props.row.networkPathURL }}</el-link>
                                <!--<span>{{ props.row.networkPathURL }}</span>-->
                            </el-form-item>
                            <el-form-item label="文件MD5值">
                                <span>{{ props.row.md5Value }}</span>
                            </el-form-item>
                            <el-form-item label="文件大小">
                                <span>{{ props.row.fileSizeStr }}</span>
                            </el-form-item>

                            <el-form-item label="文件类型">
                                <span>{{ props.row.fileType }}</span>
                            </el-form-item>

                            <el-form-item label="储存日期">
                                <span>{{ props.row.storageDate }}</span>
                            </el-form-item>

                            <el-form-item label="上传统计">
                                <span>{{ props.row.uploadCount }}</span>
                            </el-form-item>

                            <el-form-item label="下载统计">
                                <span>{{ props.row.downloadCount }}</span>
                            </el-form-item>


                            <el-form-item label="上传日期">
                                <span>{{ props.row.createTime }}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>

                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="orgName"   label="文件名"></el-table-column>
                <el-table-column prop="fileSizeStr" label="文件大小"></el-table-column>
                <el-table-column prop="fileType" label="文件类型"></el-table-column>
                <el-table-column prop="createTime" width="180" label="上传日期"></el-table-column>

                <el-table-column label="操作" width="180" align="center"  fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="seeFile(scope.$index, scope.row)"
                        >查看</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                        @size-change="handleSizeChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="formTitle" :visible.sync="editVisible"   width="800px">
            <!-- <WebUpload
                    :fileNumLimit="fileNumLimit"
                    :fileSize="fileSize"
                    :chunkSize="chunkSize"
                    :uploadSuffixUrl="uploadSuffixUrl"
                    :options="options"
                    :fileListData="fileList"
            > </WebUpload> -->
            <WebUpload
                    :fileNumLimit="fileNumLimit"
                    :fileSize="fileSize"
                    :chunkSize="chunkSize"
                    :uploadSuffixUrl="uploadSuffixUrl"
                    :options="options"
                    :fileListData="fileList"
            > </WebUpload>
            <span slot="footer" class="dialog-footer">
                <!--<el-button @click="editVisible = false">取 消</el-button>-->
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!--图片查看-->
        <el-dialog title="图片查看" :visible.sync="showImgVisible" width="800px">
            <el-image
                    v-if="imageUrl"
                    class="avatar"npm
                    :src="imageUrl"
                    :preview-src-list="[imageUrl]"
            ></el-image>
            <span slot="footer" class="dialog-footer">
                <!--<el-button @click="editVisible = false">取 消</el-button>-->
                <el-button type="primary" @click="showImgVisible=false;imageUrl=''">关 闭</el-button>
            </span>
        </el-dialog>

        <!--Excel导出-->

    </div>
</template>

<script>
// import { getList,delData,delDatas } from '../../../api/api';
// import WebUpload from '../../common/upload/WebUpload';
import WebUpload from "@/components/common/upload/WebUpload";

import Axios from "axios";

export default {
  name: "uploadfile",
  data() {
    return {
      query: {
        orgName: "",
        fileType: "",
        pageIndex: 1,
        pageSize: 10
      },
      formTitle: "添加",
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      uId: 0,
      id: -1,

      loading: true,
      uploadLoading: false,
      showRemoveFile: false,

      imageUrl: "",
      showImgVisible: false,
      uploader: {},
      uploadBtnDisabled: false,
      uploadStaus: "el-icon-upload",
      fileList: [], //显示集合
      chunked: true, //是否开启分片上传
      fileNumLimit: 200, //文件总数
      fileSize: 100 * 1024 * 1024 * 1024, //默认上传文件大小
      chunkSize: 30 * 1024 * 1024, //默认文件片段
      // uploadSuffixUrl: "http://172.16.71.180:8777",
      options: {
        //允许上传的文件
        fileType:
          "doc,docx,pdf,xls,xlsx,ppt,pptx,gif,jpg,jpeg,bmp,png,rar,zip,mp4,avi",
        fileUploadUrl: "/upload/chunkUpload/upload_do", //上传地址
        fileCheckUrl: "/upload/chunkUpload/checkFile", //检测文件是否存在url
        checkChunkUrl: "/upload/chunkUpload/checkFile", //检测分片url
        mergeChunksUrl: "/upload/fileRecord/zone/upload/merge/", //合并文件请求地址
        headers: {}
      }
    };
  },
  components: {
    WebUpload
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      var that = this;
      this.loading = true;
      var query = this.query;
      var pageSize = query.pageSize;
      var pageIndex = query.pageIndex;
      var reqData = {};

      if (query.orgName.length > 0) {
        reqData.orgName = query.orgName;
      }
      if (query.fileType != null && query.fileType != "") {
        reqData.fileType = query.fileType;
      }
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          delData(row.id).then(res => {
            if (res.success) {
              this.$message.success(res.message);
              // this.tableData.splice(index, 1);
              this.getData();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message.success("取消成功");
        });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addAllSelection() {
      //添加数据
      this.form = {
        isFilter: "1",
        contentType: "",
        fileSuffix: "",
        fileType: "",
        fileTag: "",
        fileDescribe: ""
      };
      this.formTitle = "上传文件";
      this.editVisible = true;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      let str = "";
      let ids = "";
      if (length == 0) {
        this.$message.error(`请选择数据`);
        return;
      }
      this.delList = this.delList.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].orgName + "、";
        ids += this.multipleSelection[i].id + ",";
      }
      str = str.substring(0, str.length - 1);
      ids = ids.substring(0, ids.length - 1);
      delDatas(ids).then(res => {
        if (res.success) {
          this.$message.success(`删除了【${str}】`);
          this.multipleSelection = [];
          this.getData();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 编辑操作
    seeFile(index, row) {
      console.log("row:", row);
      var orgName = row.orgName;
      var fSuffix = orgName.substring(orgName.lastIndexOf(".") + 1);
      if (
        fSuffix === "png" ||
        fSuffix === "gif" ||
        fSuffix === "jpg" ||
        fSuffix === "jpeg" ||
        fSuffix === "bmp"
      ) {
        this.showImgVisible = true;
        this.imageUrl = this.uploadSuffixUrl + row.networkPath;
      } else if (fSuffix === "mp4" || fSuffix === "mp3" || fSuffix === "pdf") {
        this.$confirm("需要新开窗口页面，确定需要吗？", "提示", {
          type: "warning",
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            window.open(this.uploadSuffixUrl + row.networkPath);
          })
          .catch(() => {
            this.$message.success("取消成功");
          });
      } else {
        this.$confirm("不支持在线查看，请[下载]后查看", "提示", {
          type: "warning",
          confirmButtonText: "下载",
          cancelButtonText: "取消"
        })
          .then(() => {
            window.open(this.uploadSuffixUrl + row.networkPath);
          })
          .catch(() => {
            this.$message.success("取消成功");
          });
      }
    },
    // 保存编辑
    saveEdit(formName) {
      console.log("form:", formName);
      this.editVisible = false;
      this.getData();
      this.fileList = [];
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    handleSizeChange(val) {
      this.$set(this.query, "pageSize", val);
      this.getData();
    },
    handleGetFile(e) {
      var file = e.target.files[0];
      console.log("file:", file);
      var type = file.type;
      var fileType = type.substring(0, type.lastIndexOf("/"));
      var fileName = file.name;
      var fileSuffix = fileName.substring(fileName.lastIndexOf(".") + 1);
      this.form.contentType = type;
      this.form.fileType = fileType;
      this.form.fileSuffix = fileSuffix;
      console.log("this.form:", this.form);
    },
    formatFileSize(size) {
      var fileSize = 0;
      if (size / 1024 > 1024) {
        var len = size / 1024 / 1024;
        fileSize = len.toFixed(2) + "MB";
      } else if (size / 1024 / 1024 > 1024) {
        var len = size / 1024 / 1024;
        fileSize = len.toFixed(2) + "GB";
      } else {
        var len = size / 1024;
        fileSize = len.toFixed(2) + "KB";
      }
      return fileSize;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.table-td-thumb-from-item {
  display: block;
  max-width: 200px;
  max-height: 200px;
}

.avatar {
  min-width: 100px;
  min-height: 100px;
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  display: block;
  cursor: pointer;
  border: 1px solid #eee;
}

.el-image__inner {
  width: auto;
  height: auto;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
